<template>
  <div>
    <el-container class="main-el-contarner">
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              @submit.native.prevent
            >
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入事件名称关键字检索"
                  clearable
                  v-model="param.name"
                  @keydown.enter.native="onSearch"
                  size="small"
                  style="width: 350px"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch">查找</el-button>
              </el-form-item>
              <el-form-item style="float: right">
                <el-button
                  type="text"
                  v-if="selectionChangeData == ''"
                  disabled
                  style="color: #cdc5bf"
                  ><i class="el-icon-delete"></i>删除数据</el-button
                >
                <el-button type="text" v-else style="color: #ff0000" @click="delClick"
                  ><i class="el-icon-delete"></i> 删除数据</el-button
                >
              </el-form-item>
              <el-form-item style="float: right">
                <el-button type="text" style="color: #18bc9c" @click="AddData"
                  ><i class="el-icon-plus"></i> 新增事件</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == '1'">
                <el-button
                  size="mini"
                  type="danger"
                  @click="forbiddenClick"
                  style="color: #ffffff"
                  ><i class="el-icon-video-pause"></i> 禁用</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == '0'">
                <el-button
                  size="mini"
                  type="primary"
                  @click="forbiddenClick"
                  style="color: #ffffff"
                  ><i class="el-icon-video-play"></i> 启用</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == ''">
                <el-button disabled size="mini" type="danger" style="color: #ffffff"
                  ><i class="el-icon-video-pause"></i> 禁用</el-button
                >
              </el-form-item>
              <el-form-item style="float: right" v-if="statusData == ''">
                <el-button disabled size="mini" type="primary" style="color: #ffffff"
                  ><i class="el-icon-video-play"></i> 启用</el-button
                >
              </el-form-item>
              <!-- <el-form-item style="float: right">
                <el-button size="mini" type="primary" plain @click="handleAdd"><i class="el-icon-download"></i>
                  导出数据</el-button>
              </el-form-item> -->
            </el-form>
          </div>
          <div class="container-box">
            <el-table
              :data="tabledatas"
              border
              stripe
              max-height="480px"
              @row-dblclick="rowdbclick"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              style="width: 100%"
              size="small"
              ref="talbes"
              @selection-change="selectionChange"
              @row-click="handleRowClick"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column prop="event_name" label="事件名称"> </el-table-column>
              <el-table-column prop="event_description" label="事件描述">
              </el-table-column>
              <el-table-column prop="is_inform" label="是否通知">
                <template #default="scope">
                  <font v-if="scope.row.is_inform == '1'">是</font>
                  <font v-else-if="scope.row.is_inform == '0'">否</font>
                  <font v-else>/</font>
                </template>
              </el-table-column>
              <el-table-column prop="is_turn_to_alarm" label="是否告警">
                <template #default="scope">
                  <font v-if="scope.row.is_turn_to_alarm == '1'">是</font>
                  <font v-else-if="scope.row.is_turn_to_alarm == '0'">否</font>
                  <font v-else>/</font>
                </template>
              </el-table-column>
              <el-table-column prop="is_to_control" label="是否联动设备控制">
                <template #default="scope">
                  <font v-if="scope.row.is_to_control == '1'">是</font>
                  <font v-else-if="scope.row.is_to_control == '0'">否</font>
                  <font v-else>/</font>
                </template>
              </el-table-column>
              <el-table-column prop="is_start" label="是否启用">
                <template #default="scope">
                  <font v-if="scope.row.is_start == '1'">启用</font>
                  <font v-else-if="scope.row.is_start == '0'">禁用</font>
                  <font v-else>/</font>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="300">
                <template slot-scope="scope">
                  <el-button
                    @click.stop="informClick(scope.row)"
                    type="text"
                    icon="el-icon-phone-outline"
                    class="tablebtn"
                    :style="{
                      color: scope.row.is_inform == 0 ? '#cdc5bf' : '#339933',
                    }"
                    :disabled="scope.row.is_inform == 0"
                    >通知</el-button
                  >
                  |
                  <el-button
                    @click.stop="alarmClick(scope.row)"
                    type="text"
                    icon="el-icon-sunrise-1"
                    class="tablebtn"
                    :style="{
                      color: scope.row.is_turn_to_alarm == 0 ? '#cdc5bf' : '#ffcc33',
                    }"
                    :disabled="scope.row.is_turn_to_alarm == 0"
                    >告警</el-button
                  >|
                  <el-button
                    @click.stop="controlClick(scope.row)"
                    type="text"
                    icon="el-icon-data-analysis"
                    class="tablebtn"
                    :style="{
                      color: scope.row.is_to_control == 0 ? '#cdc5bf' : '#0033ff',
                    }"
                    :disabled="scope.row.is_to_control == 0"
                    >控制</el-button
                  >|
                  <el-button
                    @click.stop="editClick(scope.row)"
                    icon="el-icon-edit"
                    type="text"
                    style="color: #18bc9c; margin: 5px; padding: 0px"
                    >编辑</el-button
                  >
                  <!-- <el-button @click="delClick(scope.row)" icon="el-icon-delete" type="text"
                    style="color: #FF0000;margin:5px;padding:0px;">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pageNo"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
          </div>
          <div>
            <el-dialog
              v-if="dialogEvent"
              v-dialogDrag
              :title="tabletitle"
              :visible.sync="dialogEvent"
              width="70%"
              top="30px"
              :class="dialogEvent == true ? 'action01' : 'action02'"
              :before-close="handleClose"
            >
              <el-form
                :inline="true"
                :model="eventData.datas[0]"
                class="demo-form-inline"
                :rules="rules3"
                ref="eventData"
              >
                <el-form-item
                  label="事件名称"
                  :label-width="formLabelWidth"
                  prop="event_name"
                >
                  <el-input
                    v-model="eventData.datas[0].event_name"
                    style="width: 200px"
                    placeholder="事件名称"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="是否通知"
                  v-if="eventData.datas[0].is_turn_to_alarm == '0'"
                  :label-width="formLabelWidth"
                  prop="is_inform"
                >
                  <el-select
                    v-model="eventData.datas[0].is_inform"
                    class="infoCss"
                    disabled
                    @change="is_informChange"
                    style="width: 200px"
                    placeholder="是否通知"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="是否通知"
                  v-else
                  :label-width="formLabelWidth"
                  prop="is_inform"
                  class="a"
                >
                  <el-select
                    v-model="eventData.datas[0].is_inform"
                    class="infoCss"
                    @change="is_informChange"
                    style="width: 200px"
                    placeholder="是否通知"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="是否告警"
                  :label-width="formLabelWidth"
                  prop="is_turn_to_alarm"
                >
                  <el-select
                    v-model="eventData.datas[0].is_turn_to_alarm"
                    @change="is_turn_to_alarmChange"
                    style="width: 200px"
                    placeholder="是否告警"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="是否联动设备控制"
                  :label-width="formLabelWidth"
                  prop="is_to_control"
                >
                  <el-select
                    v-model="eventData.datas[0].is_to_control"
                    style="width: 200px"
                    placeholder="是否联动设备控制"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否禁用" :label-width="formLabelWidth">
                  <el-select
                    v-model="eventData.datas[0].is_start"
                    disabled
                    style="width: 200px"
                    placeholder="是否联动设备控制"
                  >
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="事件描述" :label-width="formLabelWidth">
                  <el-input
                    v-model="eventData.datas[0].event_description"
                    style="width: 550px"
                    type="textarea"
                    :rows="2"
                    placeholder="事件描述"
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item label="是否通知以及告警" :label-width="formLabelWidth">
                  <el-switch v-model="switchvalue" active-color="#13ce66" inactive-color="#ff4949" active-value="0"
                    inactive-value="1">
                  </el-switch>
                </el-form-item> -->
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">关 闭</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
              </div>
            </el-dialog>
          </div>
          <!-- 通知dialog -->
          <div>
            <el-dialog
              v-if="dialogVisible"
              v-dialogDrag
              :title="tabletitle"
              :visible.sync="dialogVisible"
              width="70%"
              top="30px"
              class="action03"
              :before-close="infoClose"
            >
              <div class="el-dialog-div">
                <div style="position: absolute; top: 15px; left: 81%; float: right">
                  <el-button type="primary" @click="loadTemp">导入通知模板</el-button>
                </div>
                <el-form
                  :inline="true"
                  :model="informData.datas[0]"
                  class="demo-form-inline"
                  :rules="rules"
                  ref="informData"
                >
                  <el-form-item label="事件名称" :label-width="formLabelWidth">
                    <el-input
                      v-model="informData.datas[0].event_name"
                      style="width: 207px"
                      placeholder="事件名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="通知类型"
                    :label-width="formLabelWidth"
                    prop="inform_type"
                  >
                    <el-select
                      v-model="informData.datas[0].inform_type"
                      placeholder="选择类型"
                      style="width: 207px"
                    >
                      <el-option label="故障通知" value="1"></el-option>
                      <el-option label="离线通知" value="2"></el-option>
                      <el-option label="消防通知" value="3"></el-option>
                      <el-option label="周界通知" value="4"></el-option>
                      <el-option label="周位通知" value="5"></el-option>
                      <!-- <el-option v-for="(item, type) in selectinform_type" :key="type" :label="item.label"
                        :value="item.value">
                      </el-option> -->
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="通知方式"
                    :label-width="formLabelWidth"
                    prop="inform_way"
                  >
                    <el-select
                      ref="selectBox"
                      filterable
                      v-model="informData.datas[0].inform_way"
                      multiple
                      placeholder="通知方式"
                      style="width: 207px"
                    >
                      <el-option label="企业微信" value="1"></el-option>
                      <el-option label="钉钉" value="2"></el-option>
                      <el-option label="邮件" value="3"></el-option>
                      <!-- <el-option v-for="item in infoSelectWay" :key="item.value" :label="item.label"
                        :value="item.value" /> -->
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="通知内容" :label-width="formLabelWidth">
                    <el-select v-model="informData.datas[0].inform_content" placeholder="通知内容"
                      style="width:207px;height: 100px;">
                      <el-option v-for="(item, content) in selectinform_content" :key="content" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item> -->
                  <el-form-item
                    label="通知内容"
                    :label-width="formLabelWidth"
                    prop="inform_content"
                  >
                    <el-input
                      v-model="informData.datas[0].inform_content"
                      type="textarea"
                      placeholder="通知内容"
                      style="width: 207px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="通知对象"
                    :label-width="formLabelWidth"
                    prop="user_name"
                  >
                    <div @click="handleUserName">
                      <el-input
                        v-model="informData.datas[0].user_name"
                        style="width: 560px"
                        autocomplete="off"
                        placeholder="通知对象"
                      >
                      </el-input>
                    </div>
                  </el-form-item>
                </el-form>

                <hr style="margin-top: -10px" />
                <div class="" style="margin: 10px 0px">事件通知定义记录</div>
                <div>
                  <Eventinform
                    @getEveninfoData="getEveninfoData"
                    :infoEvent="informData.datas[0].event_id"
                    :key="timer"
                  >
                  </Eventinform>
                </div>
              </div>
              <div slot="footer" class="dialog-footer">
                <div v-if="infoconfirm.length == '0'">
                  <el-button @click="infoClose">关 闭</el-button>
                  <el-button type="primary" @click="confirm">保 存</el-button>
                </div>
                <div v-else>
                  <el-button @click="infoClose">关 闭</el-button>
                  <el-button type="primary" disabled>保 存</el-button>
                </div>
              </div>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="dialogVisible1"
              v-dialogDrag
              :title="tabletitle"
              :visible.sync="dialogVisible1"
              width="70%"
              top="30px"
              :before-close="aramClose"
              class="action03"
            >
              <div class="el-dialog-div">
                <div
                  style="
                    position: absolute;
                    top: 15px;
                    left: 81%;
                    margin-right: 40px;
                    float: right;
                  "
                >
                  <el-button type="primary" @click="loadMap">导入告警设置</el-button>
                </div>
                <el-form
                  :inline="true"
                  :model="alarmData.datas[0]"
                  class="demo-form-inline"
                  :rules="rules1"
                  ref="alarmData"
                >
                  <el-form-item label="事件名称" :label-width="formLabelWidth">
                    <el-input
                      v-model="alarmData.datas[0].event_name"
                      placeholder="事件名称"
                      style="width: 207px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="是否转工单"
                    :label-width="formLabelWidth"
                    prop="is_turn_to_order"
                  >
                    <el-select
                      v-model="alarmData.datas[0].is_turn_to_order"
                      placeholder="是否转工单"
                      style="width: 207px"
                    >
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="告警等级"
                    :label-width="formLabelWidth"
                    prop="alarm_level"
                  >
                    <el-select
                      v-model="alarmData.datas[0].alarm_level"
                      placeholder="选择告警等级"
                      style="width: 207px"
                    >
                      <!-- <el-option label="一般" value="1"></el-option>
                      <el-option label="较严重" value="2"></el-option>
                      <el-option label="严重" value="3"></el-option> -->
                      <el-option
                        v-for="item in AlarmLevelData"
                        :key="item.data_value"
                        :label="item.data_text"
                        :value="item.data_value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="告警分类"
                    :label-width="formLabelWidth"
                    prop="alarm_type"
                  >
                    <el-select
                      v-model="alarmData.datas[0].alarm_type"
                      placeholder="选择告警分类"
                      style="width: 207px"
                    >
                      <!-- <el-option label="故障告警" value="1"></el-option>
                      <el-option label="离线告警" value="2"></el-option>
                      <el-option label="消防告警" value="3"></el-option>
                      <el-option label="周界告警" value="4"></el-option>
                      <el-option label="周位告警" value="5"></el-option> -->
                      <el-option
                        v-for="item in AlarmCategoryData"
                        :key="item.base_class"
                        :label="item.base_desc"
                        :value="item.base_class"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="启用时段" :label-width="formLabelWidth" prop="using_time_range">
                    <el-select v-model="alarmData.datas[0].using_time_range" placeholder="选择启用时段" style="width:207px;">
                      <el-option v-for="item in selectusing_time_range" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item> -->
                  <el-form-item
                    label="开始时段"
                    :label-width="formLabelWidth"
                    prop="start_date"
                  >
                    <el-time-select
                      placeholder="起始时间"
                      style="width: 207px"
                      v-model="alarmData.datas[0].start_date"
                      :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:00',
                      }"
                    >
                    </el-time-select>
                  </el-form-item>
                  <el-form-item
                    label="结束时段"
                    :label-width="formLabelWidth"
                    prop="end_date"
                  >
                    <el-time-select
                      placeholder="结束时间"
                      style="width: 207px"
                      v-model="alarmData.datas[0].end_date"
                      :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:59',
                        minTime: alarmData.datas[0].start_date,
                      }"
                    >
                    </el-time-select>
                  </el-form-item>
                  <el-form-item
                    label="通知类型"
                    :label-width="formLabelWidth"
                    prop="inform_type"
                  >
                    <el-select
                      v-model="alarmData.datas[0].inform_type"
                      placeholder="选择通知类型"
                      style="width: 207px"
                    >
                      <el-option label="故障通知" value="1"></el-option>
                      <el-option label="离线通知" value="2"></el-option>
                      <el-option label="消防通知" value="3"></el-option>
                      <el-option label="周界通知" value="4"></el-option>
                      <el-option label="周位通知" value="5"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="通知模板"
                    :label-width="formLabelWidth"
                    prop="inform_template"
                  >
                    <!-- <el-input v-model="alarmData.datas[0].inform_template"  placeholder="通知模板"></el-input> -->
                    <el-input
                      v-model="alarmData.datas[0].inform_template"
                      style="width: 207px"
                      placeholder="选择通知模板"
                      autocomplete="off"
                    >
                      <i slot="suffix" class="el-icon-more" @click="loadTemp"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="通知方式"
                    :label-width="formLabelWidth"
                    prop="inform_way"
                  >
                    <el-select
                      v-model="alarmData.datas[0].inform_way"
                      multiple
                      placeholder="通知方式"
                      style="width: 207px"
                    >
                      <el-option label="企业微信" value="1"></el-option>
                      <el-option label="钉钉" value="2"></el-option>
                      <el-option label="邮件" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="通知内容"
                    :label-width="formLabelWidth"
                    prop="inform_content"
                  >
                    <el-input
                      v-model="alarmData.datas[0].inform_content"
                      style="width: 207px"
                      placeholder="通知内容"
                      autocomplete="off"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="通知对象"
                    :label-width="formLabelWidth"
                    prop="user_name"
                  >
                    <el-input
                      v-model="alarmData.datas[0].user_name"
                      style="width: 562px"
                      placeholder="通知对象"
                      autocomplete="off"
                    >
                    </el-input>
                  </el-form-item>
                </el-form>
                <hr style="margin-top: -10px" />
                <div class="" style="margin: 10px 0px">事件告警定义记录</div>
                <div>
                  <Eventalarm
                    @getEvenalarmData="getEvenalarmData"
                    :alarmEvent="alarmData.datas[0].event_id"
                    :key="timer"
                  >
                  </Eventalarm>
                </div>
              </div>
              <div slot="footer" class="dialog-footer">
                <div v-if="alarmconfirm.length == '0'">
                  <el-button @click="aramClose">关 闭</el-button>
                  <el-button type="primary" @click="confirm1">保 存</el-button>
                </div>
                <div v-else>
                  <el-button @click="aramClose">关 闭</el-button>
                  <el-button type="primary" disabled>保 存</el-button>
                </div>
              </div>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="dialogContro"
              v-dialogDrag
              :title="tabletitle"
              :visible.sync="dialogContro"
              width="70%"
              top="30px"
              :before-close="controClose"
              :class="dialogContro == true ? 'action01' : 'action02'"
            >
              <div class="el-dialog-div">
                <div
                  style="
                    position: absolute;
                    top: 15px;
                    left: 81%;
                    margin-right: 40px;
                    float: right;
                  "
                >
                  <el-button type="primary" @click="loadAction">导入联动动作</el-button>
                </div>
                <el-form
                  :inline="true"
                  :model="controlData.datas[0]"
                  class="demo-form-inline"
                  :rules="rules2"
                  ref="controlData"
                >
                  <el-form-item
                    label="设备名称"
                    :label-width="formLabelWidth"
                    prop="device_name"
                  >
                    <el-input
                      v-model="controlData.datas[0].device_name"
                      style="width: 200px"
                      placeholder="设备名称"
                    >
                      <i slot="suffix" class="el-icon-more" @click="loadContro"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="设备型号"
                    :label-width="formLabelWidth"
                    prop="device_model"
                  >
                    <el-input
                      v-model="controlData.datas[0].device_model"
                      placeholder="设备型号"
                      style="width: 200px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="地理区域"
                    :label-width="formLabelWidth"
                    prop="device_site"
                  >
                    <el-input
                      v-model="controlData.datas[0].device_site"
                      placeholder="地理区域"
                      style="width: 200px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="安装位置"
                    :label-width="formLabelWidth"
                    prop="install_site"
                  >
                    <el-input
                      v-model="controlData.datas[0].install_site"
                      placeholder="安装位置"
                      style="width: 200px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="联动动作"
                    :label-width="formLabelWidth"
                    prop="control_action"
                  >
                    <el-input
                      v-model="controlData.datas[0].control_action"
                      placeholder="联动动作"
                      style="width: 200px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="启用状态"
                    :label-width="formLabelWidth"
                    prop="active_status"
                  >
                    <!-- <el-input v-model="controlData.datas[0].active_status" placeholder="启用状态"
                      style="width: 200px;"></el-input> -->
                    <el-select
                      v-model="controlData.datas[0].active_status"
                      style="width: 200px"
                      placeholder="请选择启用状态"
                    >
                      <el-option label="启用" value="1"></el-option>
                      <el-option label="禁用" value="0"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="启用频率"
                    :label-width="formLabelWidth"
                    prop="active_times"
                  >
                    <!-- <el-input v-model="controlData.datas[0].active_times" placeholder="启用频率"
                      style="width: 200px;"></el-input> -->
                    <el-select
                      v-model="controlData.datas[0].active_times"
                      style="width: 200px"
                      placeholder="请选择启用频率"
                    >
                      <el-option label="单次" value="0"></el-option>
                      <el-option label="持续调用" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="间隔时间"
                    v-if="
                      controlData.datas[0].active_times == '0' ||
                      controlData.datas[0].active_times == ''
                    "
                    :label-width="formLabelWidth"
                  >
                    <el-input
                      disabled
                      v-model="controlData.datas[0].interval_time"
                      placeholder="间隔时间"
                      style="width: 200px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="间隔时间"
                    v-else
                    :label-width="formLabelWidth"
                    key="interval_time"
                    prop="interval_time"
                  >
                    <!-- <el-input v-model="controlData.datas[0].interval_time" placeholder="间隔时间"
                      style="width: 200px;"></el-input> -->
                    <el-select
                      style="width: 200px"
                      v-model.number="controlData.datas[0].interval_time"
                      allow-create
                      default-first-option
                      clearable
                      @blur="nameblur($event)"
                      ref="nameSel"
                      filterable
                      placeholder="间隔时间"
                    >
                      <el-option label="半个小时" value="30"></el-option>
                      <el-option label="一个小时" value="60"></el-option>
                      <el-option label="一个半小时" value="90"></el-option>
                      <el-option label="两个小时" value="120"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="时间单位"
                    v-if="
                      controlData.datas[0].active_times == '0' ||
                      controlData.datas[0].active_times == ''
                    "
                    :label-width="formLabelWidth"
                  >
                    <!-- <el-input disabled v-model="controlData.datas[0].interval_unit" placeholder="时间单位"
                      style="width: 200px;"></el-input> -->
                    <el-select
                      style="width: 200px"
                      v-model.number="controlData.datas[0].interval_time"
                      allow-create
                      default-first-option
                      clearable
                      @blur="nameblur($event)"
                      ref="nameSel"
                      filterable
                      placeholder="间隔时间"
                    >
                      <el-option label="半个小时" value="30"></el-option>
                      <el-option label="一个小时" value="60"></el-option>
                      <el-option label="一个半小时" value="90"></el-option>
                      <el-option label="两个小时" value="120"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="时间单位"
                    v-else
                    :label-width="formLabelWidth"
                    key="interval_unit"
                    prop="interval_unit"
                  >
                    <el-select
                      v-model="controlData.datas[0].interval_unit"
                      style="width: 200px"
                      placeholder="时间单位"
                    >
                      <el-option label="分" value="0"></el-option>
                      <el-option label="时" value="1"></el-option>
                      <el-option label="天" value="2"></el-option>
                      <el-option label="月" value="3"></el-option>
                      <el-option label="年" value="4"></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="启用时段" :label-width="formLabelWidth" prop="active_period">
                    <el-input v-model="controlData.datas[0].active_period" placeholder="启用时段"
                      style="width: 200px;"></el-input>
                  </el-form-item> -->
                  <el-form-item
                    v-if="contrOne == ''"
                    label="开始时段"
                    :label-width="formLabelWidth"
                    prop="start_date"
                  >
                    <el-time-select
                      placeholder="起始时间"
                      style="width: 200px"
                      v-model="controlData.datas[0].start_date"
                      :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:00',
                      }"
                    >
                    </el-time-select>
                  </el-form-item>
                  <el-form-item
                    v-else
                    label="开始时段"
                    :label-width="formLabelWidth"
                    prop="start_date"
                  >
                    <el-time-select
                      placeholder="起始时间"
                      style="width: 200px"
                      disabled
                      v-model="controlData.datas[0].start_date"
                      :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:00',
                      }"
                    >
                    </el-time-select>
                  </el-form-item>
                  <el-form-item
                    v-if="contrOne == ''"
                    label="结束时段"
                    :label-width="formLabelWidth"
                    prop="end_date"
                  >
                    <el-time-select
                      placeholder="结束时间"
                      style="width: 200px"
                      v-model="controlData.datas[0].end_date"
                      :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:59',
                        minTime: controlData.datas[0].start_date,
                      }"
                    >
                    </el-time-select>
                  </el-form-item>
                  <el-form-item
                    v-else
                    label="结束时段"
                    :label-width="formLabelWidth"
                    prop="end_date"
                  >
                    <el-time-select
                      placeholder="结束时间"
                      style="width: 200px"
                      disabled
                      v-model="controlData.datas[0].end_date"
                      :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:59',
                        minTime: controlData.datas[0].start_date,
                      }"
                    >
                    </el-time-select>
                  </el-form-item>
                </el-form>

                <hr style="margin-top: -10px" />
                <div style="margin: 10px 0px">控制设备明细记录</div>
                <div>
                  <Eventcontrol
                    @getEvencontrData="getEvencontrData"
                    :controlEvent="controlData.datas[0].event_id"
                    :key="timer"
                  ></Eventcontrol>
                </div>
              </div>
              <div slot="footer" class="dialog-footer">
                <div v-if="contrconfirm.length == '0'">
                  <el-button @click="controClose">关 闭</el-button>
                  <el-button type="primary" @click="confirm2">保 存</el-button>
                </div>
                <div v-else>
                  <el-button @click="controClose">关 闭</el-button>
                  <el-button type="primary" disabled>保 存</el-button>
                </div>
              </div>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="dialogVisibleTemp"
              v-dialogDrag
              title="事件告警定义记录"
              :visible.sync="dialogVisibleTemp"
              width="70%"
              top="30px"
              :class="dialogVisibleTemp == true ? 'action01' : 'action02'"
            >
              <div class="el-dialog-div">
                <AlarmSetting @getName="AlarmSettingname" :key="timer"></AlarmSetting>
              </div>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="dialogTemp"
              v-dialogDrag
              title="通知模板"
              :visible.sync="dialogTemp"
              width="70%"
              top="30px"
              :class="dialogTemp == true ? 'action01' : 'action02'"
            >
              <div class="el-dialog-div">
                <NoticeTemplate @getName="TemplateData" :key="timer"></NoticeTemplate>
              </div>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="dialogloadContro"
              v-dialogDrag
              title="设备组"
              :visible.sync="dialogloadContro"
              width="70%"
              top="30px"
              :class="dialogloadContro == true ? 'action01' : 'action02'"
            >
              <div class="el-dialog-div">
                <decvicegroupfrom
                  :num="num"
                  @getName="ControFrom"
                  :key="timer"
                ></decvicegroupfrom>
              </div>
              <span slot="footer" class="dialog-footer" style="margin-top: -50px">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="ControFrombind">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <div>
            <el-dialog
              v-if="dialogAction"
              v-dialogDrag
              title="联动动作"
              :visible.sync="dialogAction"
              width="70%"
              top="30px"
              :class="dialogAction == true ? 'action01' : 'action02'"
            >
              <div class="el-dialog-div">
                <Controlaction @getName="ActionFrom" :key="timer"></Controlaction>
              </div>
            </el-dialog>
          </div>
        </div>
      </el-main>
      <systemuser ref="userNameRef" @getUserData="handleUserData"></systemuser>
    </el-container>
  </div>
</template>

<script>
import { getDateTimes, numFormat, getDateWeek, downloadCallback } from "@/utils/index.js";
import {
  getlist,
  getexpro,
  getgridsave,
  getdeletes,
  getAlarmCategory,
  getAlarmLevel,
} from "@/api/message/list";
import moment from "moment";
import Eventinform from "@/views/message/components/Eventinform.vue";
import Eventalarm from "@/views/message/components/Eventalarm.vue";
import Eventcontrol from "@/views/message/components/Eventcontrol.vue";
import NoticeTemplate from "@/views/message/components/NoticeTemplate";
import AlarmSetting from "@/views/message/components/AlarmSetting";
import decvicegroupfrom from "@/views/message/components/decvicegroupfrom.vue";
import Controlaction from "@/views/message/components/Controlaction.vue";
import systemuser from "@/views/message/components/systemuser.vue";

export default {
  name: "Monitorevent",
  components: {
    Eventalarm,
    NoticeTemplate,
    AlarmSetting,
    decvicegroupfrom,
    Controlaction,
    Eventinform,
    Eventcontrol,
    systemuser,
  },
  data() {
    return {
      AlarmCategoryData: [],
      getAlarmLevelData: [],
      statusData: "",
      switchvalue: 1,
      loadingdata1: false,
      isloading: false,
      param: {
        funId: "msg_monitor_event",
        baseSQL: "",
        warnStatus: "",
        name: "",
        offset: 0,
        pageNo: 1,
        limit: 10,
      },
      dataTotal: 0,
      tabledatas: [],
      dialogVisible: false,
      num: 1,
      dialogVisible1: false,
      dialogVisibleTemp: false,
      dialogTemp: false,
      dialogContro: false,
      dialogloadContro: false,
      dialogAction: false,
      dialogEvent: false,
      selectionChangeData: [],
      tabletitle: "",
      timer: new Date().getTime(),
      formLabelWidth: "140px",
      informData: {
        is_iot: false,
        funId: "msg_event_inform",
        datas: [
          {
            event_name: "",
            inform_type: "",
            event_id: "",
            inform_content: "",
            inform_way: "",
            user_name: "",
            user_id: "",
          },
        ],
      },
      infoSelectWay: [
        { label: "APP", value: "1" },
        { label: "WEB", value: "2" },
        { label: "小程序", value: "3" },
        { label: "手机", value: "4" },
        { label: "企业微信", value: "5" },
      ],
      rules: {
        inform_type: [{ required: true, message: "通知类型必填", trigger: "blur" }],
        inform_way: [{ required: true, message: "通知方式必填", trigger: "blur" }],
        // inform_content: [
        //   { required: true, message: '通知内容必填', trigger: 'blur' }
        // ],
        user_name: [{ required: true, message: "通知对象必填", trigger: "blur" }],
      },
      alarmData: {
        is_iot: false,
        funId: "msg_event_alarm",
        datas: [
          {
            event_name: "",
            inform_type: "",
            is_turn_to_order: "",
            alarm_level: "",
            alarm_type: "",
            event_id: "",
            using_time_range: "",
            inform_template: "",
            inform_template_id: "",
            start_date: "",
            end_date: "",
            inform_content: "",
            inform_way: "",
            user_name: "",
            user_id: "",
          },
        ],
      },
      rules1: {
        inform_type: [{ required: true, message: "通知类型必填", trigger: "blur" }],
        is_turn_to_order: [
          { required: true, message: "是否转工单必填", trigger: "blur" },
        ],
        alarm_level: [{ required: true, message: "告警等级", trigger: "blur" }],
        alarm_type: [{ required: true, message: "告警类型必填", trigger: "blur" }],
        start_date: [
          {
            required: true,
            message: "开始时段必填",
            trigger: "blur",
          },
        ],
        end_date: [{ required: true, message: "结束时段必填", trigger: "blur" }],
        // inform_content: [
        //   { required: true, message: '通知内容必填', trigger: 'blur' }
        // ],
        user_name: [{ required: true, message: "通知对象必填", trigger: "blur" }],
        inform_way: [{ required: true, message: "通知方式必填", trigger: "blur" }],
      },
      controlData: {
        funId: "msg_event_control",
        is_iot: false,
        datas: [
          {
            device_model: "", //设备型号
            active_times: "", //启用频率;单次；持续调用
            interval_time: "  ", //间隔时间
            control_action: "", //联动动作
            device_name: "", //设备名称
            active_status: "", //启用状态;启用；禁用
            interval_unit: "", //时间单位;秒；分；时；天；月；年
            device_site: "", //地理区域
            install_site: "", //安装位置
            active_period: "", //启用开始时间;以当天的时间：比如  09：00 - 17：00
            device_id: "", //设备id;要控制的设备从设备卡片或者设备组中导入
            event_id: "", //事件id;外键
            // event_control_id: '',//主键
            start_date: "", //开始时段
            end_date: "", //结束时段
          },
        ],
      },
      rules2: {
        device_model: [{ required: true, message: "设备型号必填", trigger: "blur" }],
        active_times: [{ required: true, message: "启用频率必填", trigger: "blur" }],
        interval_time: [
          { required: true, message: "间隔时间必填", trigger: "blur" },
          {
            required: true,
            type: "number",
            message: "只能填写数字",
            trigger: "blur",
          },
        ],
        control_action: [{ required: true, message: "联动动作必填", trigger: "blur" }],
        device_name: [{ required: true, message: "设备名称必填", trigger: "blur" }],
        active_status: [{ required: true, message: "启用状态必填", trigger: "blur" }],
        interval_unit: [{ required: true, message: "时间单位必填", trigger: "blur" }],
        device_site: [{ required: true, message: "地理区域必填", trigger: "blur" }],
        install_site: [{ required: true, message: "安装位置必填", trigger: "blur" }],
        active_period: [{ required: true, message: "启用时段必填", trigger: "blur" }],
        start_date: [{ required: true, message: "开始时段必填", trigger: "blur" }],
        end_date: [{ required: true, message: "结束时段必填", trigger: "blur" }],
      },
      eventData: {
        funId: "msg_monitor_event",
        is_iot: false,
        datas: [
          {
            event_id: "", //事件id
            event_name: "", //事件名称
            event_description: "", //事件描述
            is_turn_to_alarm: "", //是否告警
            is_inform: "", //是否通知
            is_to_control: "", //是否联动设备控制
            is_start: "1", //是否禁用
          },
        ],
      },
      rules3: {
        event_name: [{ required: true, message: "事件名称必填", trigger: "blur" }],
        is_turn_to_alarm: [{ required: true, message: "是否告警必填", trigger: "blur" }],
        is_inform: [{ required: true, message: "是否通知必填", trigger: "blur" }],
        is_to_control: [
          { required: true, message: "是否联动设备控制必填", trigger: "blur" },
        ],
      },
      selectinform_type: "",
      selectinform_way: "",
      selectinform_content: "",
      selecttemplate_name: "",
      selectusing_time_range: "",
      ControFrombindData: "",
      sonInform: [], //通知
      sonAlarm: [], //告警
      sonControl: [], //控制
      contrOne: "",
      start_date: "", //开始时间
      end_date: "", //结束时间
      infoconfirm: "",
      alarmconfirm: "",
      contrconfirm: "",
    };
  },
  mounted() {
    this.getDatas();
    this.getAlarmSetting();
    this.getTempdata();
  },
  created() {
    this.isloading = false;
  },
  methods: {
    //判断添加修改表单是否变化
    handleClose() {
      let num = 0;
      for (const key in this.eventData.datas[0]) {
        if (this.eventData.datas[0][key] == "") {
          // num = num + 0
          num += 0;
        } else if (this.eventData.datas[0][key] == null) {
          // num = num + 0
          num += 0;
        } else {
          // num = num + 1
          num += 1;
        }
      }
      if (this.tabletitle == "新增事件") {
        if (num != 1) {
          this.$confirm("表单未保存,是否关闭?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.dialogEvent = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消关闭",
              });
            });
        } else {
          this.dialogEvent = false;
        }
      } else {
        // console.log('222',JSON.stringify(this.formData.datas[0]))
        // console.log('2222',sessionStorage.getItem("initForm"))
        if (
          JSON.stringify(this.eventData.datas[0]) == sessionStorage.getItem("initForm")
        ) {
          this.dialogEvent = false;
        } else {
          this.$confirm("表单未保存,是否关闭?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.dialogEvent = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消关闭",
              });
            });
        }
      }
    },
    //判断通知表单是否变化
    infoClose() {
      let num = 0;
      for (const key in this.informData.datas[0]) {
        if (this.informData.datas[0][key] == "") {
          num += 0;
        } else if (this.informData.datas[0][key] == null) {
          num += 0;
        } else {
          num += 1;
        }
      }
      if (num != 2) {
        this.$confirm("表单未保存,是否关闭?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.dialogVisible = false;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消关闭",
            });
          });
      } else {
        this.dialogVisible = false;
      }
    },
    //判断告警表单是否变化
    aramClose() {
      let num = 0;
      for (const key in this.alarmData.datas[0]) {
        if (this.alarmData.datas[0][key] == "") {
          num += 0;
        } else if (this.alarmData.datas[0][key] == null) {
          num += 0;
        } else {
          num += 1;
        }
      }
      if (num != 2) {
        this.$confirm("表单未保存,是否关闭?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.dialogVisible1 = false;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消关闭",
            });
          });
      } else {
        this.dialogVisible1 = false;
      }
      // console.log('num', num)
    },
    //判断控制表单是否变化
    controClose() {
      let num = 0;
      for (const key in this.controlData.datas[0]) {
        if (this.controlData.datas[0][key] == "") {
          num += 0;
        } else if (this.controlData.datas[0][key] == null) {
          num += 0;
        } else {
          num += 1;
        }
      }
      console.log(num);
      if (num != 2 && num != 4) {
        this.$confirm("表单未保存,是否关闭?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.dialogContro = false;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消关闭",
            });
          });
      } else {
        this.dialogContro = false;
      }
      // console.log('num', num)
    },
    //是否通知下拉按钮
    is_informChange(e) {
      // console.log('eventData.datas[0].is_turn_to_alarm', this.eventData.datas[0].is_turn_to_alarm)
    },
    //是否告警下拉按钮
    is_turn_to_alarmChange(e) {
      if (e == "0") {
        this.eventData.datas[0].is_inform = "1";
      }
    },
    //自定义间隔时间的下拉选
    nameblur(e) {
      // this.controlData.datas[0].interval_time = Number(e.target.value)
      // this.controlData.datas[0].interval_time = e.target.placeholder
      if (e.target.value) {
        this.controlData.datas[0].interval_time = Number(e.target.value);
      }
      // console.log('nameblur', this.controlData.datas[0].interval_time)
      // this.controlData.datas[0].interval_time = this.$refs.nameSel.selectedLabel
    },
    //获取通知模板信息
    TemplateData(e) {
      if (this.$refs["informData"]) {
        this.$refs["informData"].resetFields();
      }
      this.informData.datas[0].inform_way = e[0].inform_way.split(";");
      this.informData.datas[0].inform_type = e[0].inform_type;
      this.informData.datas[0].inform_content = e[0].inform_content;
      this.informData.datas[0].user_name = e[0].user_name;
      this.informData.datas[0].user_id = e[0].user_id;

      this.alarmData.datas[0].user_name = e[0].user_name;
      this.alarmData.datas[0].user_id = e[0].user_id;
      this.alarmData.datas[0].inform_template = e[0].template_name;
      this.alarmData.datas[0].inform_template_id = e[0].template_id;
      this.alarmData.datas[0].inform_type = e[0].inform_type;
      this.alarmData.datas[0].inform_way = e[0].inform_way.split(";");
      this.alarmData.datas[0].inform_content = e[0].inform_content;
      this.dialogTemp = false;
    },
    //获取告警信息
    AlarmSettingname(e) {
      if (this.$refs["alarmData"]) {
        this.$refs["alarmData"].resetFields();
      }
      let Settingname = e;
      // this.alarmData.datas = Settingname
      this.alarmData.datas[0].inform_template_id = Settingname[0].inform_template_id;
      this.alarmData.datas[0].inform_type = Settingname[0].inform_type;
      this.alarmData.datas[0].is_turn_to_order = Settingname[0].is_turn_to_order;
      this.alarmData.datas[0].alarm_level = Settingname[0].alarm_level;
      this.alarmData.datas[0].alarm_type = Settingname[0].alarm_type;
      this.alarmData.datas[0].using_time_range = Settingname[0].using_time_range;
      this.alarmData.datas[0].inform_template = Settingname[0].inform_template;
      this.alarmData.datas[0].start_date = this.startdate(Settingname[0].start_date);
      this.alarmData.datas[0].end_date = this.enddate(Settingname[0].end_date);
      this.alarmData.datas[0].inform_content = Settingname[0].inform_content;
      this.dialogVisibleTemp = false;
    },
    //获取设备组成员信息
    ControFrom(e) {
      // if (this.$refs['controlData']) {
      //   this.$refs['controlData'].resetFields();
      // }
      // this.controlData.datas[0].device_model = e[0].device_model//设备型号
      // this.controlData.datas[0].device_name = e[0].device_name//设备名称
      // this.controlData.datas[0].device_id = e[0].device_id//设备id
      // this.dialogloadContro = false
      this.ControFrombindData = e;
    },
    // 确定设备组成员按钮
    ControFrombind() {
      if (this.ControFrombindData.length == "0") {
        this.$message({
          message: "请选择一条数据",
          type: "error",
        });
      } else {
        this.controlData.datas[0].device_model = this.ControFrombindData[0].device_model; //设备型号
        this.controlData.datas[0].device_name = this.ControFrombindData[0].device_name; //设备名称
        this.controlData.datas[0].device_id = this.ControFrombindData[0].device_id; //设备id
        this.dialogloadContro = false;
      }
    },
    //获取通知字表的信息
    getEveninfoData(e) {
      this.infoconfirm = e;
    },
    //获取告警字表信息
    getEvenalarmData(e) {
      this.alarmconfirm = e;
    },
    //获取控制字表信息
    getEvencontrData(e) {
      this.contrconfirm = e;
    },
    //获取联动动作信息
    ActionFrom(e) {
      // if (this.$refs['controlData']) {
      //   this.$refs['controlData'].resetFields();
      // }
      this.controlData.datas[0].active_times = e[0].active_times; //启用频率;单次；持续调用
      this.controlData.datas[0].control_action = e[0].control_action; //联动动作
      this.controlData.datas[0].active_status = e[0].active_status; //启用状态;启用；禁用
      this.controlData.datas[0].interval_unit = e[0].interval_unit; //时间单位;秒；分；时；天；月；年
      this.controlData.datas[0].active_period = e[0].active_period; //启用开始时间;以当天的时间：比如  09：00 - 17：00
      if (this.contrOne == "") {
        this.controlData.datas[0].start_date = this.startdate(e[0].start_date);
        this.controlData.datas[0].end_date = this.enddate(e[0].end_date);
      }

      // this.controlData.datas[0].interval_time = e[0].interval_time//间隔时间
      if (e[0].interval_time == "30") {
        this.controlData.datas[0].interval_time = 30;
      } else if (e[0].interval_time == "60") {
        this.controlData.datas[0].interval_time = 60;
      } else if (e[0].interval_time == "90") {
        this.controlData.datas[0].interval_time = 90;
      } else if (e[0].interval_time == "120") {
        this.controlData.datas[0].interval_time = 120;
      } else {
        this.controlData.datas[0].interval_time = Number(e[0].interval_time);
      }
      this.dialogAction = false;
    },
    loadTemp() {
      this.dialogTemp = true;
      this.timer = new Date().getTime();
    },
    loadMap() {
      this.timer = new Date().getTime();
      this.dialogVisibleTemp = true;
    },
    loadContro() {
      this.timer = new Date().getTime();
      this.dialogloadContro = true;
    },
    loadAction() {
      this.timer = new Date().getTime();
      this.dialogAction = true;
    },
    //禁用启用按钮
    forbiddenClick() {
      let fromData = {
        funId: "msg_monitor_event",
        is_iot: false,
        datas: [{}],
      };
      let statusName = "";
      fromData.datas = this.selectionChangeData;
      if (
        fromData.datas[0].is_inform == "1" ||
        fromData.datas[0].is_turn_to_alarm == "1" ||
        fromData.datas[0].is_to_control == "1"
      ) {
        if (fromData.datas.length != 1) {
          this.$message({
            message: "请选择一条数据进行启用或者禁用",
            type: "error",
          });
          return false;
        } else {
          if (fromData.datas[0].is_inform == "1" && this.sonInform.length == 0) {
            this.$message({
              message: `通知详情未进行配置，请配置后进行启用禁用`,
              type: "error",
            });
            return false;
          } else if (
            fromData.datas[0].is_turn_to_alarm == "1" &&
            this.sonAlarm.length == 0
          ) {
            this.$message({
              message: `告警详情未进行配置，请配置后进行启用禁用`,
              type: "error",
            });
            return false;
          } else if (
            fromData.datas[0].is_to_control == "1" &&
            this.sonControl.length == 0
          ) {
            this.$message({
              message: `控制详情未进行配置，请配置后进行启用禁用`,
              type: "error",
            });
            return false;
          }
        }
      } else {
        this.$message({
          duration: 3000,
          showClose: true,
          message: `${fromData.datas[0].event_name}___请修改"通知/告警/控制当中的任何一个状态为【是】"`,
          type: "error",
        });
        return false;
      }
      // sonInform: [],//通知
      // sonAlarm: [],//告警
      // sonControl: [],//控制

      if (this.statusData == "0") {
        fromData.datas[0].is_start = "1";
        statusName = "启用";
      } else if (this.statusData == "1") {
        fromData.datas[0].is_start = "0";
        statusName = "禁用";
      }
      this.$confirm(
        `当前选择了${fromData.datas[0].event_name}, 是否${statusName}?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          getgridsave(fromData).then((res) => {
            if (res.data.code == "200") {
              this.$message({
                message: "修改启用状态成功",
                type: "success",
              });
              this.loading = false;
              this.getDatas();
              // this.toggleSelection(e)
            } else {
              this.$message({
                message: "修改启用状态失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: `已取消${statusName}`,
          });
          this.getDatas();
          this.loading = false;
        });
    },
    // 添加按钮
    AddData() {
      if (this.$refs["eventData"]) {
        this.$refs["eventData"].resetFields();
      }
      this.eventData.datas[0].event_id = ""; //事件id
      this.eventData.datas[0].event_name = ""; //事件名称
      this.eventData.datas[0].event_description = ""; //事件描述
      this.eventData.datas[0].is_turn_to_alarm = ""; //是否告警
      this.eventData.datas[0].is_inform = ""; //是否通知
      this.eventData.datas[0].is_to_control = ""; //是否联动设备控制
      this.eventData.datas[0].is_start = "1"; //是否启用

      this.dialogEvent = true;
      this.tabletitle = "新增事件";
    },
    // 编辑按钮
    editClick(info) {
      this.getDatas();
      this.eventData.datas[0] = info;
      sessionStorage.setItem("initForm", JSON.stringify(this.eventData.datas[0]));
      // console.log('editClick',JSON.stringify(this.eventData.datas[0]))
      if (this.$refs["eventData"]) {
        this.$refs["eventData"].resetFields();
      }
      this.eventData.datas[0] = info;
      this.dialogEvent = true;
      this.tabletitle = "编辑事件";
    },
    //双击打开编辑页面
    rowdbclick(row) {
      this.getDatas();
      if (this.$refs["eventData"]) {
        this.$refs["eventData"].resetFields();
      }
      this.eventData.datas[0] = row;
      this.dialogEvent = true;
      this.tabletitle = "编辑事件";
      sessionStorage.setItem("initForm", JSON.stringify(this.eventData.datas[0]));
    },
    //添加保存按钮
    save() {
      this.$refs["eventData"].validate((valid) => {
        if (valid) {
          // console.log('valid',valid)
          if (this.eventData.datas[0].event_id) {
            this.updateevent();
            this.dialogEvent = false;
          } else {
            this.addevent();
            this.dialogEvent = false;
          }
        }
      });
    },
    // 修改数据
    updateevent() {
      getgridsave(this.eventData).then((res) => {
        if (res.data.code == "200") {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getDatas();
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    //添加数据
    addevent() {
      getgridsave(this.eventData).then((res) => {
        if (res.data.code == "200") {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getDatas();
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    },
    //删除按钮
    delClick() {
      var tablefromdata = {
        funId: "msg_monitor_event",
        ids: "",
      };
      this.selectionChangeData.forEach((item) => {
        tablefromdata.ids += item.event_id + ";";
      });
      this.$confirm(`已选择${this.selectionChangeData.length}条数据, 是否删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        getdeletes(tablefromdata).then((res) => {
          if (res.data.code == "200") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getDatas();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
      });
    },
    // 复选框按钮
    selectionChange(e) {
      if (e.length == 0) {
        this.statusData = "";
        this.selectionChangeData = "";
      } else {
        this.statusData = e[0].is_start;
        this.selectionChangeData = e;
        if (this.selectionChangeData.length == 1) {
          this.getinform(this.selectionChangeData[0].event_id);
          this.getalarm(this.selectionChangeData[0].event_id);
          this.getcontrol(this.selectionChangeData[0].event_id);
        }
      }
    },
    handleRowClick(e) {
      if (!e.disabled) {
        this.$refs.talbes.toggleRowSelection(e);
      }
    },
    //导出execl
    handleAdd() {
      let fromData = {
        exportFields: [],
        ids: [],
        funId: "msg_monitor_event",
      };
      //动态获取表头
      let fields = [];
      this.$refs.talbes.$children.forEach((item) => {
        if (item.label != undefined && item.prop != undefined) {
          fields.push({
            title: item.label,
            value: item.prop,
          });
        }
        fromData.exportFields = JSON.stringify(fields);
      });
      //获取主键ID
      if (this.selectionChangeData.length != 0) {
        this.selectionChangeData.forEach((item, index) => {
          if (index != 0) {
            fromData.ids += ";";
          }
          fromData.ids += item.event_id;
        });
      } else {
        this.tabledatas.forEach((item, index) => {
          if (index != 0) {
            fromData.ids += ";";
            // console.log('fromData.ids',fromData.ids)
          }
          fromData.ids += item.event_id;
        });
      }
      downloadCallback(fromData, this.selectionChangeData.length);
    },
    // 用户信息
    handleUserName() {
      this.$refs.userNameRef.handleShowUser();
      this.informData.datas[0].user_name = "";
      this.informData.datas[0].user_id = "";
    },
    //获取用户数据
    handleUserData(val) {
      val.forEach((item) => {
        this.informData.datas[0].user_name += item.user_name + ";";
        this.informData.datas[0].user_id += item.user_id + ";";
      });
      this.$refs["informData"].validate((valid) => {});
    },
    //通知按钮
    informClick(e) {
      this.dialogVisible = true;
      this.tabletitle = "事件通知定义";
      if (this.$refs["informData"]) {
        this.$refs["informData"].resetFields();
      }
      this.informData.datas[0].event_name = e.event_name;
      this.informData.datas[0].event_id = e.event_id;
      this.informData.datas[0].inform_type = "";
      this.informData.datas[0].inform_content = "";
      this.informData.datas[0].inform_way = [];
      this.informData.datas[0].user_name = "";
      this.informData.datas[0].user_id = "";
    },
    //告警按钮
    alarmClick(e) {
      this.dialogVisible1 = true;
      this.tabletitle = "事件告警定义";
      if (this.$refs["alarmData"]) {
        this.$refs["alarmData"].resetFields();
      }
      this.alarmData.datas[0].inform_template = "";
      this.alarmData.datas[0].inform_template_id = "";
      this.alarmData.datas[0].inform_type = "";
      this.alarmData.datas[0].user_name = "";
      this.alarmData.datas[0].user_id = "";

      this.alarmData.datas[0].event_name = e.event_name;
      this.alarmData.datas[0].event_id = e.event_id;
      this.alarmData.datas[0].inform_type = "";
      this.alarmData.datas[0].is_turn_to_order = "";
      this.alarmData.datas[0].alarm_level = "";
      this.alarmData.datas[0].alarm_type = "";
      this.alarmData.datas[0].using_time_range = "";
      this.alarmData.datas[0].inform_template = "";
      this.alarmData.datas[0].start_date = "";
      this.alarmData.datas[0].end_date = "";
      this.alarmData.datas[0].inform_content = "";
      this.alarmData.datas[0].inform_way = "";
    },
    //控制按钮
    controlClick(e) {
      if (this.$refs["controlData"]) {
        this.$refs["controlData"].resetFields();
      }
      this.dialogContro = true;
      this.tabletitle = "定义事件联动";
      this.controlData.datas[0].event_name = e.event_name;
      this.controlData.datas[0].event_id = e.event_id;
      this.controlData.datas[0].active_times = ""; //启用频率;单次；持续调用
      this.controlData.datas[0].interval_time = ""; //间隔时间
      this.controlData.datas[0].control_action = ""; //联动动作
      this.controlData.datas[0].active_status = ""; //启用状态;启用；禁用
      this.controlData.datas[0].interval_unit = ""; //时间单位;秒；分；时；天；月；年
      this.controlData.datas[0].active_period = ""; //启用开始时间;以当天的时间：比如  09：00
      this.controlData.datas[0].start_date = ""; //开始时段
      this.controlData.datas[0].end_date = ""; //结束时段
      // this.controlData.datas[0].event_id = e.event_id
      this.controlData.datas[0].device_model = ""; //设备型号
      this.controlData.datas[0].device_name = ""; //设备名称
      this.controlData.datas[0].device_site = ""; //地理区域
      this.controlData.datas[0].install_site = ""; //安装位置
      this.controlData.datas[0].device_id = ""; //设备id;要控制的设备从设备卡片或者设备组中导入
      this.getcontroData(this.controlData.datas[0].event_id);
    },
    getcontroData(event_id) {
      let formData = {
        funId: "msg_event_control",
        baseSQL: 'event_id like "%' + event_id + '%"',
      };
      getlist(formData).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          this.contrOne = resdata.rows;
          if (this.contrOne != "") {
            this.start_date = this.start_dateFormat(this.contrOne[0].start_date);
            this.end_date = this.end_dateFormat(this.contrOne[0].end_date);
            this.controlData.datas[0].start_date = this.start_date; //开始时段
            this.controlData.datas[0].end_date = this.end_date; //结束时段
            // console.log('shijian', this.start_date, this.end_date)
          }

          // this.start_date = this.start_dateFormat(this.contrOne[0].start_date)
          // this.end_date = this.end_dateFormat(this.contrOne[0].end_date)
          // console.log('shijian', this.start_date, this.end_date)
        }
      });
    },
    //通知保存按钮
    confirm() {
      this.$refs["informData"].validate((valid) => {
        if (valid) {
          this.addinform();
          this.dialogVisible = true;
        }
      });
    },
    //告警保存按钮
    confirm1() {
      // console.log('this.alarmData', this.alarmData)
      this.$refs["alarmData"].validate((valid) => {
        if (valid) {
          this.addalarm();
          this.dialogVisible1 = true;
        }
      });
    },
    //控制保存按钮
    confirm2() {
      this.$refs["controlData"].validate((valid) => {
        if (valid) {
          this.addcontro();
          this.dialogContro = true;
        }
      });
    },
    addinform() {
      // console.log('this.informData', this.informData)
      this.informData.datas[0].inform_way = this.informData.datas[0].inform_way.join(";");
      getgridsave(this.informData).then((res) => {
        if (res.data.code == "200") {
          this.timer = new Date().getTime();
          this.$message({
            message: "通知成功",
            type: "success",
          });
          this.informData.datas[0].inform_way = "";
          this.informData.datas[0].inform_type = "";
          this.informData.datas[0].inform_content = "";
          this.informData.datas[0].user_name = "";
          this.informData.datas[0].user_id = "";
          this.getDatas();
        } else {
          this.$message({
            message: "通知失败",
            type: "error",
          });
        }
      });
    },
    addalarm() {
      this.alarmData.datas[0].inform_way = this.alarmData.datas[0].inform_way.join(";");
      getgridsave(this.alarmData).then((res) => {
        if (res.data.code == "200") {
          this.timer = new Date().getTime();
          this.$message({
            message: "告警成功",
            type: "success",
          });
          this.alarmData.datas[0].inform_template_id = "";
          this.alarmData.datas[0].inform_type = "";
          this.alarmData.datas[0].is_turn_to_order = "";
          this.alarmData.datas[0].alarm_level = "";
          this.alarmData.datas[0].alarm_type = "";
          this.alarmData.datas[0].using_time_range = "";
          this.alarmData.datas[0].inform_template = "";
          this.alarmData.datas[0].start_date = "";
          this.alarmData.datas[0].end_date = "";
          this.alarmData.datas[0].inform_content = "";
          this.alarmData.datas[0].inform_way = "";
          this.alarmData.datas[0].user_name = "";
          this.alarmData.datas[0].user_id = "";
          this.getDatas();
        } else {
          this.$message({
            message: "告警失败",
            type: "error",
          });
        }
      });
    },
    addcontro() {
      getgridsave(this.controlData).then((res) => {
        if (res.data.code == "200") {
          this.timer = new Date().getTime();
          this.$message({
            message: "控制成功",
            type: "success",
          });
          this.controlData.datas[0].active_times = ""; //启用频率;单次；持续调用
          this.controlData.datas[0].interval_time = ""; //间隔时间
          this.controlData.datas[0].control_action = ""; //联动动作
          this.controlData.datas[0].active_status = ""; //启用状态;启用；禁用
          this.controlData.datas[0].interval_unit = ""; //时间单位;秒；分；时；天；月；年
          this.controlData.datas[0].active_period = ""; //启用开始时间;以当天的时间：比如  09：00
          // this.controlData.datas[0].start_date = ''//开始时段
          // this.controlData.datas[0].end_date = ''//结束时段
          // this.controlData.datas[0].event_id = e.event_id
          this.controlData.datas[0].device_model = ""; //设备型号
          this.controlData.datas[0].device_name = ""; //设备名称
          this.controlData.datas[0].device_site = ""; //地理区域
          this.controlData.datas[0].install_site = ""; //安装位置
          this.controlData.datas[0].device_id = ""; //设备id;要控制的设备从设备卡片或者设备组中导入
          this.getDatas();
          // this.dialogContro = true
          // this.timer = new Date().getTime()
          this.getcontroData(this.controlData.datas[0].event_id);
        } else {
          this.$message({
            message: "控制失败",
            type: "error",
          });
        }
      });
    },
    // 数据搜索按钮
    onSearch() {
      console.log("this.param", this.param);
      this.param.pageNo = 1;
      this.getDatas();
    },
    getDatas() {
      if (this.param.name == "") {
        this.param.baseSQL = "";
      } else {
        this.param.baseSQL = 'event_name like"%' + this.param.name + '%"';
      }
      getlist(this.param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          this.tabledatas = resdata.rows;
          this.dataTotal = resdata.total;
        }
      });
      // this.getinform()
      // this.getalarm()
      // this.getcontrol()
      this.getAlarmtype();
      this.getAlarmLevel();
    },
    //获取告警分类数据
    getAlarmtype() {
      getAlarmCategory().then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          if (resdata.code == "200") {
            this.AlarmCategoryData = resdata.data;
          }
        }
      });
    },
    //获取告警等级数据
    getAlarmLevel() {
      getAlarmLevel({ data_text: "消息中心-告警等级" }).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          if (resdata.code == "200") {
            this.AlarmLevelData = resdata.data;
          }
        }
      });
    },
    getinform(event_id) {
      var _this = this;
      let param = {};
      param.funId = "msg_event_inform";
      param.baseSQL = "event_id = " + event_id;
      getlist(param).then((res) => {
        // var status = ''
        if (res.status == "200") {
          let resdata = res.data;
          this.sonInform = resdata.rows;
        }
        // console.log('this.sonInform', this.sonInform)
      });
    },
    getalarm(event_id) {
      var _this = this;
      let param = {};
      param.funId = "msg_event_alarm";
      param.baseSQL = "event_id = " + event_id;
      getlist(param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          this.sonAlarm = resdata.rows;
        }
        // console.log('this.sonAlarm', this.sonAlarm)
      });
    },
    getcontrol(event_id) {
      var _this = this;
      let param = {};
      param.funId = "msg_event_control";
      param.baseSQL = "event_id =" + event_id;
      getlist(param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          this.sonControl = resdata.rows;
        }
        // console.log('this.sonControl', this.sonControl)
      });
    },
    getTempdata() {
      let fromdata = {};
      fromdata.funId = "msg_inform_template";
      getlist(fromdata).then((res) => {
        if (res.status == "200") {
          let resdata = res.data.rows;
          // console.log('resdata',resdata)
          let inform_type = [];
          let inform_way = [];
          let inform_content = [];
          let template_name = [];
          resdata.forEach((item) => {
            if (item.auditing == 0) {
              inform_type.push({
                value: item.inform_type,
                label: item.inform_type,
              });

              inform_way.push({
                value: item.inform_way,
                label: item.inform_way,
              });

              inform_content.push({
                value: item.inform_content,
                label: item.inform_content,
              });

              template_name.push({
                value: item.template_name,
                label: item.template_name,
              });
            }
          });
          // this.selectinform_type = inform_type
          // this.selectinform_way = inform_way
          // this.selectinform_content = inform_content
          this.selecttemplate_name = template_name;
          this.selectinform_type = this.unique(inform_type);
          this.selectinform_way = this.unique(inform_way);
          this.selectinform_content = this.unique(inform_content);
        }
      });
    },
    getAlarmSetting() {
      let fromdata = {};
      fromdata.funId = "msg_alarm_setting";
      getlist(fromdata).then((res) => {
        if (res.status == "200") {
          let using_time_range = [];
          let resdata = res.data.rows;
          resdata.forEach((item) => {
            using_time_range.push({
              value: item.using_time_range,
              label: item.using_time_range,
            });
          });
          this.selectusing_time_range = using_time_range;
        }
      });
    },
    //筛选重复字段
    unique(arr) {
      // console.log('arr',arr)
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.value) && res.set(arr.value, 1));
    },
    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.limit + index + 1;
    },
    sizeChange(val) {
      this.param.limit = val;
      this.getDatas();
    },
    currentChange(val) {
      this.param.pageNo = val;
      this.param.offset = (val - 1) * this.param.limit;
      this.getDatas();
    },
    startdate(date) {
      return moment(date).format("HH:mm:ss");
    },
    enddate(date) {
      return moment(date).format("HH:mm:ss");
    },
    dateFormat(row, column, cellValue, index) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    start_dateFormat(date) {
      return moment(date).format("HH:mm");
    },
    end_dateFormat(date) {
      return moment(date).format(" HH:mm");
    },
  },
};
</script>
<style lang="scss">
.infoCss {
  .el-input__inner {
    height: 38px !important;
  }
}

.el-select-dropdown {
  min-width: 200px !important;
}

/* .el-input{
  height: 38px !important;
} */
.el-dialog__title {
  font-size: 18px;
  color: #303133;
  height: 0px;
  display: flex;
}
</style>
<style lang="scss" scoped>
/* .dialog-footer{
  margin-right: 30px;
  float: right;
} */
.el-main {
  padding: 0px !important;
}

.tablebtn {
  margin: 5px;
  padding: 0px;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style lang="scss" scoped>
.action01 {
  animation: zoomIn 0.5s;
  animation-iteration-count: 1;
}

.action02 {
  animation: zoomOut 0.5s;
  animation-iteration-count: 1;
}

.action03 {
  animation: scaleDrew 0.5s;
}

@keyframes scaleDrew {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.righttop-search-box {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
  position: fixed;
  top: 0;
  width: calc(100% - 55px);
  z-index: 4;
}

/* .demo-form-inline{
  height: 50px;
} */
.righttop-search-box .el-form-item {
  margin-bottom: 0px !important;
}

.container-box {
  padding: 10px;
  margin: 50px 0;
}

.pagebox {
  text-align: right;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #ececec;
  z-index: 4;
}
</style>
